<template>
  <ContentDetailWrap :title="t('warehouse.add')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit(formRef)">
        {{ t('action.save') }}
      </BaseButton>
    </template>

    <!--    表单-->
    <el-form :model="form" ref="formRef" label-width="110px" :rules="rules as FormRules">
      <div class="flex justify-between">
        <div class="w-50%">
          <el-form-item :label="t('supply.product_name')" prop="product_name">
            <el-input
              v-model="form.product_name"
              clearable
              :placeholder="t('supply.product_name')"
            />
          </el-form-item>
          <el-form-item :label="t('supply.product_detail_url')" prop="product_detail_url">
            <el-input
              v-model="form.product_detail_url"
              clearable
              :placeholder="t('supply.product_detail_url')"
            />
          </el-form-item>
          <el-form-item :label="t('supply.seller_id')" prop="seller_id">
            <el-select
              v-model="form.seller_id"
              :filterable="true"
              :placeholder="t('supply.seller_id')"
              :clearable="false"
            >
              <el-option
                v-for="item in retailList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="w-50%">
          <el-form-item :label="t('supply.model_id')" prop="model_id">
            <el-select
              v-model="form.model_id"
              :filterable="true"
              :placeholder="t('supply.model_id')"
              :clearable="false"
            >
              <el-option
                v-for="item in modelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('supply.status')">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              inline-prompt
              active-text="有效"
              inactive-text="无效"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContentDetailWrap>
</template>
<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElButton, ElMessage, type FormInstance, FormRules } from 'element-plus'
import { getGoodsEnumApi, getGoodsInfoApi, saveProductDataApi } from '@/api/supply'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)
const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  seller_id: '',
  model_id: '',
  product_name: '',
  product_detail_url: '',
  status: ''
})

const retailList = ref<Array<Record<string, any>>>([])
const modelList = ref<Array<Record<string, any>>>([])

const rules = reactive({
  seller_id: [{ required: true, message: '请输入渠道商', trigger: 'blur' }],
  model_id: [{ required: true, message: '请选择矿机类型', trigger: 'blur' }],
  product_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
})

const getDropDownBoxInfo = async () => {
  const resp = await getGoodsEnumApi({ field: 'all' })
  retailList.value = resp.data.retail
  modelList.value = resp.data.model
}

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    const format_att: number[] = []
    if (Array.isArray(form.value.att_path)) {
      format_att.push(...form.value.att_path.map((item) => item.id))
    } else {
      console.error('att_path is not an array')
    }

    if (valid) {
      const params = {
        id: query.id,
        seller_id: form.value.seller_id,
        model_id: form.value.model_id,
        product_name: form.value.product_name,
        product_detail_url: form.value.product_detail_url,
        status: form.value.status
      } as unknown as Record<string, any>

      const resp = await saveProductDataApi(params)
      if (resp.code === 0) {
        ElMessage.success(t('supply.saveSucMsg'))
        push('/channelManage/retail/retailProductManage')
      }
    }
  })
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getGoodsInfoApi(query.id as string)
  form.value = resp.data
}

onMounted(() => {
  getDropDownBoxInfo()
  getBackShow()
})
</script>

<style lang="less" scoped></style>
